<template>
  <div class="container">
    <div
      class="add"
      @click="outerVisible = true"
    >
      <svg
        class="icon com-card-like-icon"
        aria-hidden="true"
      >
        <use xlink:href="#icon-icon-chuangjian"></use>
      </svg>
      创建
    </div>
    <el-dialog
      title="创建"
      :visible.sync="outerVisible"
    >
      <ul class="btns">
        <li
          v-for="item in options.list"
          :key="item.id"
          @click="showDialog(item)"
        >
          <div
            class="svg"
            v-html="item.icon"
            :style="{background:item.bgcolor}"
          ></div>
          <div class="text">{{ item.text }}</div>
        </li>
      </ul>
      <el-dialog
        width="60%"
        :title="currentComponent.title"
        :visible.sync="innerVisible"
        append-to-body
      >
        <AddGroup v-if="currentComponent.name === 'addGroup'"></AddGroup>
        <CreateGroup v-if="currentComponent.name === 'createGroup'"></CreateGroup>
      </el-dialog>
      <div
        slot="footer"
        class="dialog-footer"
      >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AddGroup from "./AddGroup/index.vue";
import CreateGroup from "./CreateGroup/index.vue";
export default {
  data() {
    return {
      activeNames: ["1"],

      outerVisible: false,
      innerVisible: false,
      options: {
        list: [
          {
            id: 1,
            name: "addGroup",
            text: "加入群聊",
            bgcolor: "#ffce61",
            icon: '<svg t="1679897145952" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5396" width="48" height="48"><path d="M443.702957 499.059954A241.781503 241.781503 0 0 1 404.818509 411.819205a411.277814 411.277814 0 0 0-398.81485 411.277814 41.875559 41.875559 0 0 0 84.249637 0 327.028177 327.028177 0 0 1 327.028177-327.028177z m199.407425-19.940743a121.638529 121.638529 0 1 1 121.638529-121.638529 121.638529 121.638529 0 0 1-123.134085 119.644455z m205.888166-121.638529a205.888166 205.888166 0 1 0-205.389647 205.888166 205.888166 205.888166 0 0 0 203.894092-207.383722z m128.617789 439.194853h-104.688898v-104.190379a42.374078 42.374078 0 1 0-84.249637 0v102.694824h-102.694824a42.374078 42.374078 0 1 0 0 84.249637h102.694824v102.694824a42.374078 42.374078 0 0 0 84.249637 0v-102.694824h102.694824a42.374078 42.374078 0 0 0 0-84.249637z m-154.540754-192.428165A411.277814 411.277814 0 0 0 230.337012 972.652588a41.875559 41.875559 0 0 0 84.249637 0 327.028177 327.028177 0 0 1 327.028177-327.028177 331.016326 331.016326 0 0 1 65.804451 6.480741 260.725208 260.725208 0 0 1 113.662232-49.353337zM404.818509 411.320687a244.772614 244.772614 0 0 1-4.486667-84.748156 121.638529 121.638529 0 1 1 121.638529-182.457794A239.787429 239.787429 0 0 1 604.225934 116.197698a205.888166 205.888166 0 1 0-199.407425 295.122989z" fill="#ffffff" p-id="5397"></path></svg>',
          },
          {
            id: 2,
            name: "createGroup",
            text: "创建群聊",
            bgcolor: "#22245d",
            icon: '<svg t="1679897042638" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4970" width="48" height="48"><path d="M694.445 406.059H547.641V260.478c0-19.489-15.991-35.346-35.641-35.346-19.654 0-35.641 15.858-35.641 35.346v145.581H329.552c-19.651 0-35.641 15.858-35.641 35.344 0 19.489 15.991 35.346 35.641 35.346h146.807v145.584c0 19.486 15.988 35.344 35.641 35.344 19.651 0 35.641-15.858 35.641-35.344V476.749h146.804c19.654 0 35.641-15.858 35.641-35.346 0.001-19.487-15.987-35.344-35.641-35.344z" p-id="4971" fill="#ffffff"></path><path d="M744.143 63.944H279.857c-111.142 0-201.567 89.578-201.567 199.679v365.165c0 110.101 90.309 199.679 201.31 199.679h85.221l98.702 114.808c1.891 2.2 3.995 4.085 6.201 5.771 0.361 0.376 0.636 0.812 1.015 1.174 6.676 6.34 15.436 9.836 24.681 9.836 9.801 0 18.931-3.886 25.699-10.868l116.82-120.72h106.25c111.119 0 201.521-89.578 201.521-199.679V263.623c0-110.101-90.425-199.679-201.567-199.679z m130.281 564.845c0 71.104-58.42 128.969-130.235 128.969H622.758c-9.662 0-19.026 3.975-25.725 10.87l-101.602 104.99-107.667-116.835-61.115 0.974H279.6c-71.696 0-130.027-57.865-130.027-128.969V263.623c0-71.101 58.443-128.966 130.284-128.966h464.286c71.838 0 130.281 57.865 130.281 128.966v365.166z" p-id="4972" fill="#ffffff"></path></svg>',
          },
        ],
      },
      currentComponent: {
        name: "addFriend",
        title: "添加好友",
      },
    };
  },
  components: {
    AddGroup,
    CreateGroup,
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    //打开内层对话框
    showDialog(val) {
      this.innerVisible = true;
      this.currentComponent.name = val.name;
      this.currentComponent.title = val.text;
    },
  },
};
</script>

 <style lang="less" scoped>
.container {
  display: flex;
  justify-content: center;
  width: 100%;
  align-items: center;
  height: 8%;
}
// 创建按钮
.btns {
  padding: 20px;
  display: flex;
  justify-content: space-around;
  li {
    text-align: center;
    list-style-type: none;
    cursor: pointer;
    .svg {
      padding: 20px;
      border: 1px solid #e9e9e9;
      border-radius: 5px;
      transition: 0.3s;
    }
    .svg:hover {
      opacity: 0.8;
    }
    .text {
      margin-top: 10px;
      color: #777;
    }
  }
}
// 创建群聊
.add {
  display: flex;
  width: 100%;
  height: 10%;
  justify-content: center;
  align-items: center;
  color: #ccc;
  font-size: 1.3em;
  cursor: pointer;
}
// 创建图标
.icon {
  width: 30px;
  height: 30px;
  margin-right: 20px;
}
</style>